<link href="css/flowchart.css" rel="stylesheet">

<div class="container-fluid" style="margin: 20px">
    <div class="skyblue-br-row row">
        <div class="col-xs-9 skyblue-br" >
            <div style="width: 100%;height: 100%; display: flex; justify-content: space-between">
                <div id="myToolBarDiv" class="flow-btns"></div>
                <div  class="flow-container"  >
                    <div id="myFlowDiv" class="flow-main"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 skyblue-br" >
            <button onclick="saveDesigner()" type="button" class="btn btn-success" style="margin: 20px"> 保存数据 </button>
            <button onclick="showDesigner()" type="button" class="btn btn-danger" style="margin: 20px"> 加载数据 </button>
            <textarea id="mySavedModel" style="width:100%;height:600px">
{ "class": "go.GraphLinksModel",
  "modelData": {"position":"-5 -5"},
  "nodeDataArray": [ {"category":"Start", "text":"开始", "key":-1, "loc":"130 120"} ],
  "linkDataArray": []}
            </textarea>
        </div>
    </div>
</div>

<div class="modal fade" id="FlowTextDialog" role="dialog" aria-labelledby="setListItemLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createFileTitle">这个是配置数据的弹窗</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" autofocus class="form-control" id="FlowText">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" data-target="#setListItem"  class="btn btn-primary" id="flowTextSureBut">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="js/flowchart/gojs.js"></script>
<script src="js/flowchart/flowchart.js"></script>

<script >

    var  myDesigner= new FlowDesigner('myFlowDiv');
    var areaFlow = document.getElementById('mySavedModel');

    function initFlowChart() {
        //控制显示
        myDesigner.initToolbar('myToolBarDiv');// 初始化控件面板
        myDesigner.displayFlow(areaFlow.value);// 在设计面板中显示流程图
    }

    /**
     * 保存设计图中的数据
     */
    var saveDesigner = function(){
        areaFlow.value = myDesigner.getFlowData();
    };

    var showDesigner = function(){
        myDesigner.displayFlow(areaFlow.value);// 在设计面板中显示流程图
    };

</script>
